<template>
  <div>
    <!-- <el-button size="mini" type="success" @click="add">添加</el-button> -->
    <div class="search-Box">
      <div class="left-box">
        <div class="item">
          <div class="in-item">
            <span class="label" style="width:50px">账号:</span>
            <el-input size="mini" placeholder="输入账号" v-model="tempSearchParam.username"></el-input>
          </div>
          <div class="in-item">
            <el-button
              style="margin-left:20px"
              size="mini"
              type="primary"
              icon="el-icon-search"
              @click="search"
            >搜索</el-button>
          </div>
        </div>
      </div>
      <div class="right-box">
        <!-- <div class="item">
          <el-button
            style="margin-left:20px"
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="search"
        >搜索</el-button>-->
        <!-- <el-upload
            class="upload"
            ref="upload"
            action="notUse"
            :file-list="fileList"
            :auto-upload="false"
            :http-request="uploadFile"
            :before-upload="beforeUpload"
            accept=".xls, .xlsx"
            :limit="1"
          >
            <el-button slot="trigger" size="small" type="primary">导入教师列表</el-button>
            <el-button
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload"
            >上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">
              <i style="font-style:normal;font-weight:bold">提示</i>:导入教师信息，只能上传xls/xlsx文件，且不超过2mb
            </div>
        </el-upload>-->
        <!-- </div> -->
      </div>
    </div>
    <el-table :data="userList" stripe style="width: 100%;height:600px">
      <el-table-column prop="username" label="账号"></el-table-column>
      <el-table-column prop="name" label="用户姓名"></el-table-column>
      <el-table-column prop="identity" label="身份"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="checkInfo(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="foot-box">
      <div style="width:50%">
        <el-button type="success" @click="rufush">刷新</el-button>
      </div>
      <div style="width:50%">
        <el-pagination
          background
          :current-page="option.nowPage"
          layout="prev, pager, next"
          :page-size="option.size"
          :total="option.counts"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
    <div :class="['alertBg',isShow?'show':'']">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>修改密码</span>
        </div>
        <el-form label-width="80px">
          <el-form-item label="用户名">
            <el-input disabled v-model="changeSubmitForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="changeSubmitForm.password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input type="password" v-model="surePassword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="submitPasswordChange" type="success">确认</el-button>
            <el-button @click="close" style="margin-left:100px">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { handleMessage  } from "../../plugins";
export default {
  data() {
    return {
      searchParam: {},
      option: { size: 10, counts: 0, nowPage: 1 },
      userList: [],
      tempSearchParam: {},
      isSearch: false,
      indentifyCode: { 0: "学生", 1: "教师", 2: "管理员" },
      changeSubmitForm: {},
      isShow: false,
      surePassword: "",
      editsId: ""
    };
  },
  methods: {
    async submitPasswordChange() {
      if (!this.changeSubmitForm.password) {
        this.$message.error("请填写密码！");
        return;
      }
      if (!this.surePassword) {
        this.$message.error("请填写确认密码！");
        return;
      }
      if (this.surePassword != this.changeSubmitForm.password) {
        this.$message.error("密码和确认密码不一致！");
        return;
      }
      let res = await this.$http.put(
        `rest/User/${this.editsId}`,
        this.changeSubmitForm
      );
      handleMessage(this,res.data);
      this.close();
    },
    async search() {
      this.isSearch = true;
      this.option.nowPage = 1;
      this.searchParam.page = 1;
      this.searchParam.username = this.tempSearchParam.username;
      this.handlePageList("searchList/User", "userList");
    },
    rufush() {
      this.isSearch = false;
      this.option.nowPage = 1;
      this.searchParam.page = 1;
      this.searchParam.username = "";
      this.getUserList();
    },
    async getUserList() {
      this.handlePageList("list/User", "userList");
    },
    async handleCurrentChange(e) {
      this.option.nowPage = e;
      this.searchParam.page = e;
      this.handlePageList("list/User", "userList");
    },
    async handlePageList(url, listName) {
      let res = await this.$http.get(url, {
        params: this.searchParam
      });
      if (res.data.success) {
        this[listName] = res.data.list;
        this.option.counts = res.data.counts;
        this[listName].forEach(element => {
          element.identity = this.indentifyCode[element.identity];
        });
      } else {
        this.$message.error(res.data.message);
      }
    },
    checkInfo(index, row) {
      this.editsId = row._id;
      let indentifyChangeCode = { 学生: 0, 教师: 1, 管理员: 2 };
      this.changeSubmitForm.username = row.username;
      this.changeSubmitForm.identity = indentifyChangeCode[row.identity];
      this.changeSubmitForm.bindId = row.bindId;
      this.isShow = true;
    },
    close() {
      this.isShow = false;
      this.submitPasswordChange = {};
      this.surePassword = "";
    }
    // add() {}
  },
  created() {
    this.getUserList();
  }
};
</script>

<style scoped>
.upload {
  margin-left: 50px;
}
.search-Box {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  /* margin-left: 100px; */
  justify-content: space-between;
}
.left-box {
  width: 50%;
}
.right-box {
  width: 50%;
}
.search-Box .item {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.search-Box .item:nth-child(1) {
  margin-top: 0;
}
.search-Box .in-item {
  display: flex;
  align-items: center;
}

.search-Box .in-item {
  margin-left: 50px;
}
.search-Box .in-item:nth-child(1) {
  margin: 0;
}
.in-item .label {
  width: 100px;
  font-size: 14px;
  text-align: right;
  margin-right: 10px;
}
.foot-box {
  display: flex;
  margin-top: 20px;
  align-items: flex-end;
  padding: 0 50px;
  padding-right: 80px;
  justify-content: space-between;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.alertBg {
  display: none;
}
.show {
  display: flex;
}
</style>